 template
<script setup lang="ts">
/**
 * 引入 Vue 的 Composition API
 * 用于组件逻辑组织和生命周期管理
 */
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
/**
 * 引入 echarts 库
 * 用于图表渲染和交互处理
 */
import * as echarts from 'echarts'

/**
 * 获取 DOM 元素的引用（用于初始化图表）
 * 类型为 HTMLDivElement 或 null
 */
const chartRef = ref<HTMLDivElement | null>(null)
/**
 * 存储 ECharts 实例
 * 用于后续操作图表，如重绘、销毁等
 */
let chartInstance: echarts.ECharts | null = null

/**
 * 初始化圆环图的方法
 * 配置并渲染一个带有图例和提示框的圆环图
 * 无参数
 * 无返回值
 */
const initChart = () => {
  if (chartRef.value) {
    /**
     * 初始化 echarts 实例
     * 将图表绑定到指定的 DOM 元素上
     */
    chartInstance = echarts.init(chartRef.value)

    /**
     * 图表配置项对象
     * 包含提示框、图例、系列数据等配置信息
     */
    const option = {
      tooltip: {
        trigger: 'item',
        position: ['50%', '50%'] // 提示框的位置
      },
      legend: {
        top: '1%',
        right: '10%', // 右对齐并设置距离右边的间距
        itemGap: 10, // 增加图例项之间的间距
        itemWidth: 20, // 图例项的宽度
        itemHeight: 14, // 图例项的高度
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    }

    /**
     * 使用配置项渲染图表
     * 将定义好的配置应用到 echarts 实例中
     */
    chartInstance.setOption(option)
  }
}

/**
 * 窗口大小变化时调整图表尺寸
 * 实现响应式布局，使图表适应容器大小变化
 * 无参数
 * 无返回值
 */
const resizeChart = () => {
  if (chartInstance) {
    /**
     * 调整 echarts 实例的尺寸
     * 添加动画效果，持续时间为 300 毫秒
     */
    chartInstance.resize({
      animation: {
        duration: 300
      }
    })
  }
}

/**
 * 组件挂载后执行初始化
 * 确保 DOM 已经渲染完成后再初始化图表
 */
onMounted(() => {
  /**
   * 在下次 DOM 更新结束后执行初始化
   * 确保 chartRef 已经正确绑定到 DOM 元素
   */
  nextTick(() => {
    initChart()
    /**
     * 监听窗口大小变化事件以支持响应式
     * 当窗口尺寸改变时自动调整图表大小
     */
    window.addEventListener('resize', resizeChart)
  })
})

/**
 * 组件卸载前清理资源，防止内存泄漏
 * 移除事件监听器并销毁 echarts 实例
 */
onBeforeUnmount(() => {
  /**
   * 移除窗口大小变化的监听器
   * 避免在组件销毁后仍然触发 resize 事件
   */
  window.removeEventListener('resize', resizeChart)
  /**
   * 销毁 echarts 实例
   * 释放相关资源，防止内存泄漏
   */
  chartInstance?.dispose() // 销毁 echarts 实例
})
</script>

<template>
  <div class="ring-chart">
    <!-- 图表容器 -->
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

<style scoped>
.ring-chart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
